import Page from "@/components/common/Page";
import ByButton from "@/components/ui/ByButton";
import ByCell from "@/components/ui/ByCell";
import ByCellGroup from "@/components/ui/ByCellGroup";
import ByCol from "@/components/ui/ByCol";
import ByRow from "@/components/ui/ByRow";
import ByStepsItem from "@/components/ui/ByStepsItem";
import ByTag from "@/components/ui/ByTag";
import ByText from "@/components/ui/ByText";
import { Text, View } from "@tarojs/components";
import PopupRecord from "./components/PopupRecord";
import { useBoolean } from "ahooks";
import PopupChangeRecord from "./components/PopupChangeRecord";

const CellProps = {
  vertical: true,
};

export default () => {
  const [visibleRecord, handleRecord] = useBoolean();
  const [visibleChange, handleChange] = useBoolean();

  return (
    <>
      <Page
        slotFooter={
          <View className="p-3 text-center">
            <ByButton className="w-2/3" size="large">
              提交
            </ByButton>
          </View>
        }
      >
        <View className="bg-white p-3">
          <View className="text-lg">SS9013肖林</View>
          <View className="text-third mt-2 text-sm">
            深圳市福田区皇御苑A-12-1219
          </View>
        </View>

        <View className="bg-white p-3 mb-3">
          <ByRow content="between" className="mb-3">
            <ByText bold>下拨总计</ByText>
            <ByText bold>￥2,291</ByText>
          </ByRow>

          <ByRow>
            <ByCol span={6}>
              <ByCell {...CellProps} label="发包面积">
                71 m³
              </ByCell>
            </ByCol>

            <ByCol span={6}>
              <ByCell {...CellProps} label="发包单价">
                ￥450/㎡
              </ByCell>
            </ByCol>

            <ByCol span={6}>
              <ByCell {...CellProps} label="个性化发包">
                ￥ 16,508
              </ByCell>
            </ByCol>

            <ByCol span={6}>
              <ByCell {...CellProps} label="下拨总共金额（预算）">
                ￥ 16,508
              </ByCell>
            </ByCol>

            <ByCol span={6}>
              <ByCell {...CellProps} label="下拨变更总金额">
                <Text className="pr-3"> ￥ 16,508</Text>
                <ByText type="primary" onClick={handleChange.setTrue}>
                  明细
                </ByText>
              </ByCell>
            </ByCol>
          </ByRow>
        </View>

        <View className="bg-white p-3 mb-3">
          <ByRow content="between" className="mb-3">
            <ByText bold>已付人工费</ByText>
            <ByText bold>-￥2,291</ByText>
          </ByRow>

          <ByCell size="small" label="水电已付（含工人质保金）">
            ￥ 16,508
          </ByCell>
          <ByCell size="small" label="水电已付（含工人质保金）">
            ￥ 16,508
          </ByCell>
          <ByCell size="small" label="水电已付（含工人质保金）">
            ￥ 16,508
          </ByCell>
          <ByCell size="small" label="水电已付（含工人质保金）">
            ￥ 16,508
          </ByCell>
          <ByCell size="small" label="水电已付（含工人质保金）">
            ￥ 16,508
          </ByCell>
          <ByCell size="small" label="水电已付（含工人质保金）">
            ￥ 16,508
          </ByCell>
        </View>

        <View className="bg-white p-3 mb-3">
          <ByRow content="between" className="mb-3">
            <ByText bold>已付辅材</ByText>
            <ByText bold>-￥2,291</ByText>
          </ByRow>

          <ByCell size="small" label="防水25-1">
            ￥ 16,508
          </ByCell>
          <ByCell size="small" label="兴丰24-12">
            ￥ 16,508
          </ByCell>
          <ByCell size="small" label="腾通24-10">
            ￥ 16,508
          </ByCell>
        </View>

        <View className="bg-white p-3 mb-3">
          <ByRow content="between" className="mb-3">
            <ByText bold>其他费用</ByText>
            <ByText bold>-￥2,291</ByText>
          </ByRow>

          <ByRow>
            <ByCol span={6}>
              <ByCell {...CellProps} label="质保金">
                71 m³
              </ByCell>
            </ByCol>

            <ByCol span={6}>
              <ByCell {...CellProps} label="押金">
                ￥450/㎡
              </ByCell>
            </ByCol>

            <ByCol span={6}>
              <ByCell {...CellProps} label="团体险">
                ￥ 16,508
              </ByCell>
            </ByCol>

            <ByCol span={6}>
              <ByCell {...CellProps} label="安责险">
                ￥ 16,508
              </ByCell>
            </ByCol>

            <ByCol span={6}>
              <ByCell {...CellProps} label="一切险">
                ￥ 16,508
              </ByCell>
            </ByCol>

            <ByCol span={6}>
              <ByCell {...CellProps} label="形象保护">
                ￥ 16,508
              </ByCell>
            </ByCol>
          </ByRow>
        </View>

        <View className="bg-white p-3 mb-3">
          <ByRow content="between" className="mb-3">
            <ByText bold>罚款</ByText>
            <ByText bold>-￥2,291</ByText>
          </ByRow>

          <ByCell {...CellProps} label="罚款次数">
            <Text>3</Text>
            <ByText type="primary" onClick={handleRecord.setTrue}>
              明细
            </ByText>
          </ByCell>
        </View>

        <View className="bg-white p-3 mb-3">
          <ByRow content="between" className="mb-3">
            <ByText bold>项目经理尾款</ByText>
            <ByText bold>￥2,291</ByText>
          </ByRow>
        </View>

        <ByCellGroup title="流程">
          <ByStepsItem title="审批人">
            <ByTag size="small">张三</ByTag>
          </ByStepsItem>
          <ByStepsItem title="审批人" date="1人通过即可">
            <ByTag size="small">财务A</ByTag>
            <ByTag size="small">财务B</ByTag>
          </ByStepsItem>
          <ByStepsItem title="抄送 2人">
            <ByTag size="small">财务C</ByTag>
          </ByStepsItem>
        </ByCellGroup>
      </Page>

      {visibleRecord && <PopupRecord onCancel={handleRecord.setFalse} />}

      {visibleChange && <PopupChangeRecord onCancel={handleRecord.setFalse} />}
    </>
  );
};
